<template>
  <v-dialog-layout
    title="添加关联按钮"
    width="800px"
    v-model:visible="visible"
    @confirm="formAdd.onSubmit()"
    @cancel="cancel"
  >
    <v-form-layout ref="formAdd" v-model:form-data="formData" @validateSuccess="validateSuccess">
      <template v-for="(item, index) in formData.btnList" :key="item.value">
        <v-row-layout>
          <a-col :span="10">
            <a-form-item
              label="按钮名称"
              :name="['btnList', index, 'btnName']"
              :rules="rules.btnName"
              placeholder="请输入应用名称"
            >
              <a-input v-model:value.trim="item.btnName" />
            </a-form-item>
          </a-col>
          <a-col :span="10">
            <a-form-item
              label="按钮编号"
              :name="['btnList', index, 'btnCode']"
              :rules="rules.btnCode"
              placeholder="请输入应用编号"
            >
              <a-input v-model:value.trim="item.btnCode" />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button type="primary" @click="deleteBtn(index)">删除</a-button>
          </a-col>
        </v-row-layout>
      </template>
      <a-button class="add-btn" type="primary" @click="addBtn">添加</a-button>
    </v-form-layout>
  </v-dialog-layout>
</template>

<script setup lang="ts">
import { addRules } from './config'
import { ref, reactive, onMounted, computed } from 'vue'
import useCurrentInstance from 'lib-utils/vueInstance'

interface IBtnList {
    menuId: string | number,
    btnName: string,
    btnCode: string,
    enabled: number
}
const { proxy } = useCurrentInstance()
const props = withDefaults(defineProps < {
  visible: boolean,
  model: string,
  initForm: { [key: string]: any } | null
} > (), {
  visible: false,
  model: 'add'
})
const emit = defineEmits(['update:visible', 'close'])

let formAdd = ref();
let initBtns = [
  { label: '添加', value: 'add' },
  { label: '编辑', value: 'edit' },
  { label: '删除', value: 'delete' }
]

const formData: {
  id?: number | string
  btnList: IBtnList[]
} = reactive({
  btnList: []
})
const rules = addRules
let path = props.initForm ? props.initForm.path : ''
// let path = computed(() => {
//   return props.initForm ? props.initForm.path : ''
// })
if (path && path.substring(0, 1) === '/') {
  path = path.substring(1).split('/').join('_')
}

onMounted(() => {
  initBtnList()
})

const initBtnList = () => {
  if (path) {
    for (let i = 0; i < initBtns.length; i++) {
      formData.btnList.push({
        menuId: props.initForm?.id,
        btnName: initBtns[i].label,
        btnCode: path + '_' + initBtns[i].value,
        enabled: 1
      })
    }
  }
}

const addBtn = () => {
  formData.btnList.push({
    menuId: props.initForm?.id,
    btnName: '',
    btnCode: path + '_',
    enabled: 1
  })
}

const deleteBtn = (index) => {
  formData.btnList.splice(index, 1)
}

const validateSuccess = () => {
  if (formData.id) {
    proxy.$http.post(proxy.$api.menu.update, formData).then(res => {
      proxy.$vMessage.success('更新成功')
      emit('update:visible', false)
      emit('close', false)
    }).catch(() => {
    })
  } else {
    delete formData['id']
    proxy.$http.post(proxy.$api.btn.addBulk, formData.btnList).then(res => {
      proxy.$vMessage.success('添加成功')
      emit('update:visible', false)
      emit('close', false)
    }).catch(() => {
    })
  }
}

const cancel = () => {
  emit('update:visible', false)
}
</script>

<style lang="less" scoped>
.add-btn {
  margin-left: 100px;
}
</style>